<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body style="background: #fff;">

<!-- 头部 -->
<section id="hd">
    <div class="hdl"><a onclick="history.back()" class="a-back"></a></div>
    <h3>找 回 密 码</h3>
</section>
<!-- 头部 end-->

<!-- 主内容 -->
<section id="bd">
    <form action="">
        <div class="m-reg">
            <div class="inp"><input type="text" v-model="user.phone" placeholder="请输入手机号"></div>
            <div class="inp">
                <input class="input-code" type="text" v-model="user.validecode" placeholder="请输入验证码">
                <!-- 获取验证码 -->
                <input type="button" @click="getCheckCode" id="phone-btn" value="获取手机验证码"/>
                <!-- 获取验证码 end-->
            </div>
            <div class="inp"><input type="password" v-model="user.password" placeholder="请输入新密码"></div>
            <div class="inp"><input type="password" placeholder="请重复输入新密码"></div>
            <input class="m-btn3" @click="submit" value="找 回 密 码">
        </div>
    </form>
</section>
<!-- 主内容 end-->


<!-- 弹出框:失败 -->
<div class="m-pop dn" id="sub-f">
    <div class="pop-bg"></div>
    <div class="inner">
        <p>找回密码失败</p>
    </div>
</div>
<!-- 弹出框:失败 end-->

<!-- 弹出框:成功 -->
<div class="m-pop dn" id="sub-s">
    <div class="pop-bg"></div>
    <div class="inner">
        <p>找回密码成功</p>
    </div>
</div>
<!-- 弹出框:成功 end-->


<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var vm=new Vue({
        el:'#bd',
        data:{
            user:{
                phone:'15236101718',
                password:'qw1234',
                validecode:''
            }
        },
        methods:{
            submit:function () {
                axios.student('/resetpassword',this.user)
                    .then(function (res) {
                        console.log(res.data);
                    })
            },
            getCheckCode:function () {
                var _=this;
                axios.student('/applycode',{
                    phone:_.user.phone,
                    type:2
                }).then(function (res) {
                    console.log(res.data);
                })
            }
        }
    })
</script>
<script type="text/javascript">
    //发送验证码
    var wait = 60;
    document.getElementById("phone-btn").disabled = false;
    function time(o) {
        if (wait == 0) {
            o.removeAttribute("disabled");
            //$(o).attr("disabled", false);  jquery
            o.value = "获取手机验证码";
            wait = 60;
        } else {
            o.setAttribute("disabled", true);
            o.value = wait + "秒后,重试";
            wait--;
            setTimeout(function () {
                    time(o)
                },
                1000)
        }
    }
    document.getElementById("phone-btn").onclick =
        function () {
            time(this);
        }
</script>
</body>
</html>